<template>
  <div ref="element" class="ms-table">
    <a-collapse v-model:activeKey="searchCollapse" ghost>
      <a-collapse-panel key="1">
        <div class="ms-table__search">
          <slot name="search" />
        </div>
      </a-collapse-panel>
    </a-collapse>

    <div class="ms-table__tools">
      <slot name="tools" />
      <!-- 表格操作区域 -->
      <div class="ms-table__tools-action group-btn">
        <a-button @click="toggleCollapse">
          <template #icon><SearchOutlined /></template>
        </a-button>
        <a-button @click="$emit('reload')">
          <template #icon><ReloadOutlined /></template>
        </a-button>
        <a-popover placement="bottom" :overlayStyle="{ maxWidth: '200px' }" arrow-point-at-center>
          <template #content>
            <a-checkbox-group v-model:value="checkboxGroup" name="checkboxgroup">
              <a-row>
                <VueDraggableNext :list="cloneColumns">
                  <a-col v-for="item of cloneColumns" :key="widthDataIndex(item.dataIndex)" :span="24">
                    <a-checkbox :value="widthDataIndex(item.dataIndex)" :disabled="item.disabled">{{ item.title }}</a-checkbox>
                  </a-col>
                </VueDraggableNext>
              </a-row>
            </a-checkbox-group>
          </template>
          <template #title>
            <a-tooltip placement="top">
              <template #title>
                可拖拽调整
              </template>
              <span>列调整 <QuestionCircleOutlined /></span>
            </a-tooltip>
          </template>
          <a-button> <template #icon><TableOutlined /></template></a-button>
        </a-popover>
      </div>
    </div>

    <div class="ms-table__content">
      <a-table
        :columns="filterCheckboxColumns"
        :loading="loading"
        :dataSource="dataSource"
        :scroll="{ y: yTable }"
        :pagination="false"
      >
        <!-- slots default -->
        <template v-slot:bodyCell="{ column, record }">
          <template v-if="renderSlots.includes(column.key)">
            <slot :name="column.key" v-bind="{ column, record }" />
          </template>
        </template>
      </a-table>
    </div>

    <div class="ms-table__pagination">
      <a-pagination
        v-model:current="currentPage"
        v-model:page-size="currentPageSize"
        showSizeChanger
        :total="total"
        :show-total="(total: number) => `总数： ${total} 条`"
      />
    </div>

    <div class="ms-table__other">
      <slot />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { VueDraggableNext } from 'vue-draggable-next'
import useTableHeight from './hooks/useTableHeight'
import useFilter from './hooks/useFilter'
import { ReloadOutlined, SearchOutlined, TableOutlined, QuestionCircleOutlined } from '@ant-design/icons-vue'
import { widthDataIndex } from './type'
import type { IColumnType } from './type'

const props = defineProps<{
  page: number;
  pageSize: number;
  total: number;
  loading: boolean;
  columns: IColumnType[];
  dataSource: any[];
}>()

const emit = defineEmits(['update:page', 'update:page-size', 'reload'])
const currentPage = computed<number>({
  get (): number {
    return props.page
  },
  set (value: number) {
    emit('update:page', value)
  }
})

const currentPageSize = computed<number>({
  get (): number {
    return props.pageSize
  },
  set (value: number) {
    emit('update:page-size', value)
  }
})

const renderSlots = computed<string[]>(() => {
  return props.columns.reduce((base, { key }) => {
    if (key) {
      base.push(key as string)
    }
    return base
  }, [] as string[])
})

const { element, searchCollapse, yTable, toggleCollapse } = useTableHeight()
const { cloneColumns, checkboxGroup, filterCheckboxColumns } = useFilter(props.columns)

</script>

<style lang="less" scoped>
  .ms-table {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;

    ::v-deep(.ant-collapse-header) {
      display: none;
    }
    &__search {
      box-sizing: border-box;
      padding-bottom: 10px;
      background: #fff;
      border-bottom: 1px solid #eee;
      ::v-deep(.search-btn) {
        button {
          margin-right: 10px;
        }
      }
    }

    &__tools {
      display: flex;
      width: 100%;
      padding: 10px 5px;

      &-action {
        flex: 1;
        text-align: right;
      }
    }

    &__pagination {
      padding: 10px 0;
      text-align: right;
    }
  }
</style>
